<!-- 材料数据库-底部统计折线图 -->
<template>
  <div :id="id" ref="id"></div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
    },
    data: {
      type: Array,
    },
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 2100);
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById(this.id));
      var colors = [
        "#fe9800",
        "#23C2DB",
        "#D4EC59",
        "#FFE88E",
        "#FEB64D",
        "#dd2559",
        "#30cb13",
        "#cc45f4",
        "#5B6E96",
        "#a8dffa",
        "#62D9AD",
        "#5AAEF3",
        "#ffdc4c",
        "#FF974C",
        "#E65A56",
        "#6D61E4",
        "#4A6FE2",
        "#6D9AE7",
      ];

      let option = {
        title: {
          text: 'Number Entries Database',
          rotate: 270,
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['EXAFS','XANES','Molecules','Density of States','Band Structures','Charge Densities','Crystal Structures','Tensor Properties (Elastic, Dielectric, Piezoelectric)']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2011','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021','2022','2023']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'EXAFS',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1528,2050,3020,4002,5500,6545,7141,8526,9855,10242,11589,12546,13547]
          },
          {
            name: 'XANES',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1646,2576,3535,4857,5864,6975,7854,8985,9772,10552,11863,12865,13227]
          },
          {
            name: 'Molecules',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1544,2235,3224,4856,5125,6834,7248,8277,9655,10247,11895,12155,13995]
          },
          {
            name: 'Density of States',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1254,2652,3824,4256,5655,6854,7257,8944,9248,10645,11254,12865,13772]
          },
          {
            name: 'Band Structures',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1787,2124,3972,4214,5945,6657,7964,8257,9954,10865,11964,12345,13248]
          },
          {
            name: 'Charge Densities',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1375,2775,3357,4978,5254,6865,7345,8645,9245,10652,11248,12996,13278]
          },
          {
            name: 'Crystal Structures',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1656,2872,3254,4898,5348,6476,7358,8248,9682,10356,11964,12245,13964]
          },
          {
            name: 'Tensor Properties (Elastic, Dielectric, Piezoelectric)',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1657,2682,3232,4964,5254,6977,7254,8954,9254,10954,11254,12665,13248]
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
</style>
